<template>
  <div class="singer-home">
    <!-- 导航页 -->
    <van-nav-bar
      title="歌单详情"
      left-text="返回"
      left-arrow
      @click-left="onclickLeft"
    />
    <div class="list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @click-left="onLoad"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          :title="item"
          class="song"
        >
          <h4>{{ item.name }}</h4>
          <div class="singers">
            <span>
              <span>.</span>
              <span>{{ item.al.name }}</span>
            </span>
          </div>
          <!-- <div class="singers">
            <span v-for="(singer, index) in item.name" :key="singer.id">
              {{ singer.name }}
              <span v-show="index != item.singer.length - 1">/</span> -->
          <!-- </span>
            <span v-show="item.album.name">
              <span>·</span>
               <span>{{ item.album.name }}</span>
            </span>
            <span v-show="item.album.subtitle">
              <span>·</span>
              <span>{{ item.album.subtitle }}</span>
            </span>
          </div>  -->
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [], //vant的list列表数据
      loading: false,
      finished: false,
    };
  },
  created() {
    this.getData();
    console.log(this.id);
  },
  methods: {
    getData() {
      this.$request("get", "/artist/top/song?id=" + this.$route.params.id).then(
        (res) => {
          // console.log(res)
          this.list = res.songs;
          console.log(this.list);
        }
      );
    },
    onclickLeft() {
      this.$router.go(-1);
    },

    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求

      this.list = this.list.concat(this.songlist.splice(0, 10));

      // 加载状态结束
      this.loading = false;

      // 数据全部加载完成
      if (this.list.length >= this.songnum) {
        this.finished = true;
      }
    },
  },
};
</script>



<style scoped>
.nick {
  overflow: hidden;
  /* display: center; 弹性布局 */
}
/* .nick > span {
  height: 2rem;
  display: inline-block;
  vertical-align: middle;
  font-size: 0.8rem;
} */
.song {
  margin-bottom: 1rem;
}
.song > h4 {
  text-align: left;
  font-size: 1rem;
  padding: 0 2rem;
  margin: 0;
}
.singers {
  text-align: left;
  padding: 0 2rem;
}

.singers span {
  font-size: 0.8rem;
  color: rgb(160, 160, 190);
}

.singers > span:nth-last-child(1) > span > span:nth-child(1) {
  padding: 0 0.5rem;
  font-weight: 900;
  color: red;
}
</style>